import React, { useState } from 'react';
import { Button, InputComponent, Dropdown } from '../../../componet/index';
import './activity.scss';
export default function Activity() {
  const [inputValue, setInputValue] = useState<string>('');  // 搜索input框的值
  const [seletValue, setSelectValue] = useState(''); // 下拉框的值
  interface DropdownOption {
    label: string;
    value: any;
  }
  const options: DropdownOption[] = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
    // 新增活动
    const handleButtonClick1 = () => {
    
    };
      // 获取input框信息
  const handleInputChange = (value: string) => {
    setInputValue(value);
   
  };
  // 下拉
  const handleDropdownChange = (value: any) => {
    setSelectValue(value);
  };
    // 查询
    const handleButtonClick3 = () => {
      // get请求birthdaysearch接口，将inputValue作为参数传递
      // axios.get('/birthdaysearch',{params:{name:inputValue}}).then((response) => {
      //   setDataSource(response.data.list)
      // })
    };
  // 重置
  const handleButtonClick4 = () => {
    setInputValue('');
    setSelectValue('');
  };
  
  return (
    <div className='activity'>
      <div className='report__title'>
          <Button text="新增活动" setColor='white' onClick={handleButtonClick1} />
          &nbsp;&nbsp;
          <span>活动主题</span> &nbsp;
          <InputComponent
            value={inputValue}
            onChange={handleInputChange}
            className="custom"
            placeholder="请输入搜索内容"
          />
          <span>状态</span>
          <Dropdown options={options} placeholder='请选择' value={seletValue} onChange={handleDropdownChange} className={"select"} />
          <Button text="查询" setBackgroundColor='red' setColor='white' onClick={handleButtonClick3} />
          <Button text="重置" setBackgroundColor='white' onClick={handleButtonClick4} />
        </div>
    </div>
  )
}
